


<template>
  <view class="container_page">

    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="header">
      <view class="search">
        <!-- 搜索框  -->
        <view class="search_bar">
          <input placeholder="请输入社会单位名称"
                 v-model="searchObject.name"
                 @blur="resetSearch" />
          <view class="cuIcon-search btn_search" />
        </view>

      </view>
    </view>

    <!-- 内容 -->
    <view class="main"
          v-if="list.length > 0"
          :style="listContainerHeight">
      <scroll-view-y @refresh="refresh()"
                     @getMore="getMore()"
                     :pageNo="searchObject.pageNo"
                     :pageSize="searchObject.pageSize"
                     :total="total">
        <view slot="scrollView_content"
              :style="contentHeight">
          <view v-for="item,i in list"
                :key="i">

            <view class="card"
                  @click="toForm(item)">

              <view class="title">{{item.name}}</view>

              <view class="subTitle">单位地址：{{item.address}}</view>

              <!-- 右上角角标 -->
              <view class="cornerTip">
                <view class="address">{{ item.areaName }}</view>
              </view>

              <view class="label">注册时间：<span class="content">{{item.establishTime || '暂无'}}</span></view>

              <view class="subContent">
                <view>法人姓名: {{item.writeBy}}</view>
                <view>联系电话: {{item.writePhone}}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view-y>
    </view>

    <no-data v-else
             text="暂无报告"></no-data>
  </view>
</template> 
<script>
import ScrollViewY from '@/components/scrollViewY/index.vue'
export default {
  components: { ScrollViewY },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide () {
    return {
      getData: this.getList
    }
  },
  data () {
    return {
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "社会单位列表"
        }
      },
      list: [],
      searchObject: {
        name: '',
        pageNo: 1,
        pageSize: 10,

      },
      dataStatus: '刷新', // 用于解决闪烁问题
      total: 0,
      loading: false,
    }
  },
  onShow: function () {
    this.getList()
  },
  methods: {
    // 刷新数据
    refresh () {
      this.dataStatus = "刷新";
      this.searchObject.pageNo = 1;
    },
    // 上拉加载
    getMore () {
      if (this.searchObject.pageNo * this.searchObject.pageSize <= this.total) {
        this.dataStatus = "加载更多";
        this.searchObject.pageNo++;
      }
    },
    selector (e, type) {
      this.searchObject[type] = this.selectRange[type][e.detail.value].value
    },

    // 跳转表单
    toForm (item) {
      uni.navigateTo({
        url: '../../pages_workTableChild/socialUnit/form?unitId=' + item.unitId
      })
    },
    // 获取列表
    getList () {
      return new Promise((resolve, reject) => {
        if (this.loading) reject()

        this.loading = true
        uni.showLoading({
          title: '正在加载请稍后',
          mask: true
        });

        this.$store.dispatch("getSocialUnit", this.searchObject).then((res) => {
          if (res && res.code === 200) {
            this.total = res.data.total;
            this.dataStatus === "刷新"
              ? (this.list = res.data.items)
              : this.list.push(...res.data.items);
            resolve(res.data);
          }
        }).finally(() => {
          let timer = setTimeout(() => {
            this.loading = false
            uni.hideLoading();
            clearTimeout(timer)
          }, 3000);
        })
      });
    },
    resetSearch () {
      this.searchObject.pageNo = 1
      this.list = []
      this.getList()
    }
  },
  computed: {
    // 内容页的 最小高度 100vh - 顶部自定义标题栏 - 顶部搜索 - 底部按钮
    contentHeight () {
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      // 顶部自定义导航栏高度
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight


      if (navigationBarHeight) {
        return 'height:calc(100vh - ' + (actionBarHeight + navigationBarHeight + 65) + 'px);'
      } else {
        return 'height:calc(100vh - 80rpx - 272rpx - 124rpx);'
      }
    },
    // 高度 =  100vh - 导航栏高度 - 状态栏高度 -  菜单高度
    listContainerHeight () {
      // 顶部状态栏 + 标题栏的高度 单位px
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight;
      // 底部导航栏的高度
      const navigationBarHeight = this.navigationBarHeight;
      if (actionBarHeight) {
        return (
          "height:calc(100vh - " +
          (actionBarHeight + navigationBarHeight + 50) +
          "px);"
        );
      } else {
        return "height:calc(100vh - 80rpx - 100rpx);";
      }
    },

    // 底部导航栏高度 单位px
    navigationBarHeight () {
      return uni.getStorageSync("menuInfo").navigationBarHeight || uni.getStorageSync("menuInfo").statusBarHeight / 2;
    },
  }
}
</script>
<style lang="scss" scoped>
.container_page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #eff1f7;

  .header {
    background-color: #335ac7;
    border-radius: 0 0 20rpx 20rpx;
    padding: 24rpx;
    font-size: 32rpx;
    margin-bottom: 24rpx;
    position: fixed;
    width: 100%;
    z-index: 2;

    // 搜索框搜索
    .search_bar {
      border-radius: 20rpx;
      padding: 12rpx 24rpx;
      background: white;
      display: flex;

      input {
        flex: 1;
      }

      .btn_search {
        margin-left: 24rpx;
      }
    }
  }

  .main {
    top: 128rpx;
    position: relative;
    padding: 24rpx;
    .card {
      border-radius: 24rpx;
      background: white;
      padding: 24rpx;
      position: relative;
      margin-bottom: 24rpx;
      & > view:not(:last-child) {
        margin-bottom: 20rpx;
      }
      .title {
        color: #333;
        font-weight: bold;
        font-size: 36rpx;
        margin-bottom: 24rpx;
        width: 400rpx;
      }
      .subTitle {
        font-size: 30rpx;
        color: #333;
      }
      .content {
        color: #345ac7;
        padding: 6rpx 12rpx;
        display: inline-block;
        background-color: rgba(51, 91, 199, 0.1);
        border-radius: 20rpx;
      }

      .subContent {
        display: flex;
        view {
          width: 50%;
        }
      }

      .cornerTip {
        position: absolute;
        top: 0;
        right: 0;
        color: #345ac7;
        background-color: rgba(51, 91, 199, 0.1);
        border-radius: 0 24rpx 0 0;
        padding: 12rpx 24rpx;
        text-align: right;
        view:first-child {
          margin-bottom: 12rpx;
        }
      }
      &:after {
        position: absolute;
        right: 0;
        top: 0;
        color: white;
        padding: 6rpx 12px;
        border-radius: 0 20rpx;
      }
    }
  }
}
</style>